<template>
  <Container>
    <TableHeaderSearch slot="header" :search-option="searchOption" :value="searchCondition" :click-back-fn="clickBackFn" @onSearch="onSearch" @onExport="onExport" />
    <Tabs>
      <TabPane :label="`${storeName} 门店优惠券使用明细`">
        <Table stripe :height="options.tableHeight" :columns="list.columns" :data="list.data" no-data-text="亲，没有找到相关记录哦！~" />
        <div class="pager">
          <Page
            :total="list.total"
            :current="list.current"
            :page-size="list.pageSize"
            show-sizer
            placement="top"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
          />
        </div>
        <Loader :status="list.status" @refresh="getData" />
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import { formatDate, clearEmpty } from '@/util'
import TableHeaderSearch from '../components/TableHeaderSearch'
import table from '@/table'
import listData from './CouponStoreSummaryListData'
export default {
  components: {
    TableHeaderSearch
  },
  data () {
    return {
      storeName: '',
      storeId: this.$route.query.id || '',
      useMonth: this.$route.query.month || '',
      list: listData,
      options: {
        tableHeight: 300
      },
      searchOption: {
        showExport: true,
        showBackBtn: true,
        showCouponName: {
          value: true,
          placeholder: '优惠券名称'
        },
        showSelect: {
          value: true,
          placeholder: '选择搜索的选项'
        },
        showStatus: {
          value: true
        },
        showDate: {
          value: true,
          placeholder: '选择日期'
        }
      },
      searchCondition: {}
    }
  },
  mounted () {
    this.initTable()
    this.getData()
    this.$bus.$on('onClickListDetail', (data) => {
      this.$router.push({ name: 'sales/summary/detail', query: { code: data.couponCode, id: data.couponId } })
    })
  },
  methods: {
    ...table,
    getData () {
      const param = {
        status: 12,
        storeId: this.storeId,
        current: this.list.current,
        size: this.list.pageSize,
        useMonth: this.useMonth,
        isUsed: true // 写死
      }
      Object.keys(this.searchCondition).forEach(key => {
        if (key === 'startDate') {
          param.beginReceiveDate = formatDate(this.searchCondition.startDate, true)
        } else if (key === 'endDate') {
          param.endReceiveDate = formatDate(this.searchCondition.endDate) + ' 23:59:59'
        } else {
          param[key] = this.searchCondition[key]
        }
      })
      this.list.status = 'loading'
      this.$ajaxGet('/coupon/coupon_receive/page', param).then(res => {
        this.list.data = res.records || []
        this.list.total = Number(res.total)
        const statusMap = {
          PENDING_ACTIVATED: '待激活',
          USABLE: '可使用',
          USED: '已使用',
          INVALID: '已作废',
          OVERDUE: '已过期'
        }
        res.records.forEach(item => {
          item.statusStr = statusMap[item.status]
        })
        if (res.records.length) this.storeName = res.records[0].storeName || ''
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onSearch (data) {
      this.searchCondition = data
      this.list.current = 1
      this.getData()
    },
    onPageChange (val) {
      this.list.current = val
      this.getData()
    },
    onPageSizeChange (size) {
      this.list.current = 1
      this.list.pageSize = size
      this.getData()
    },
    onExport (data) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定导出列表?',
        onOk: () => {
          this.searchCondition = data
          let param = {
            status: 12,
            storeId: this.storeId,
            current: this.list.current,
            size: this.list.pageSize,
            useMonth: this.useMonth,
            isUsed: true
          }
          Object.keys(this.searchCondition).forEach(key => {
            if (key === 'startDate') {
              param.beginReceiveDate = formatDate(this.searchCondition.startDate, true)
            } else if (key === 'endDate') {
              param.endReceiveDate = formatDate(this.searchCondition.endDate) + ' 23:59:59'
            } else {
              param[key] = this.searchCondition[key]
            }
          })
          param = clearEmpty(param)
          this.$ajaxPost('/coupon/coupon_receive/coupon_receive_export', param).then(res => {
            if (res === 'NONE_QUERY_CONDITION') {
              this.$Message.warning({
                background: true,
                content: '请输入具体的查询条件'
              })
            } else {
              this.$router.push('/home/export/list')
            }
          })
        }
      })
    },
    clickBackFn () {
      this.$router.go(-1)
    }
  }
}
</script>
